{extend name='main'}

{block name="button"}

{if auth("admin/permission.auth/refresh")}
<button data-load='{:url("refresh")}' class='layui-btn layui-btn-sm layui-btn-primary'>刷新权限</button>
<button onclick="window.history.back()" class='layui-btn layui-btn-sm layui-btn-primary'>返回</button>
{/if}

{/block}

{block name="content"}

<div class="think-box-shadow">
    <div class="layui-tab layui-tab-card think-bg-white">
        <ul class="layui-tab-title">
            <!-- <li data-type='index' data-ztree="ztree_index" data-name="1">首页权限</li> -->
            <li data-type="operation" data-ztree="ztree" data-name="2">操作权限</li>
            <li data-type="data" data-ztree="ztree_data" data-name="3">数据权限</li>

        </ul>
        <div class="layui-tab-content">
            <!-- <div class="layui-tab-item">
                <ul id="showIndex" class="ztree notselect"></ul>
                <div class="hr-line-dashed"></div>
            </div> -->
            <div class="layui-tab-item">
                <ul id="zTree" class="ztree notselect"></ul>

            </div>
            <div class="layui-tab-item">
                <ul id="showData" class="ztree notselect"></ul>

            </div>
        </div>
        <div class="hr-line-dashed"></div>
        <div class="layui-form-item text-center">
            <button class="layui-btn" data-submit-role type='button'>保存</button>
        </div>
    </div>


</div>
{/block}

{block name="script"}
<script>
    window.RoleAction = new function () {
        this.data = {};
        this.dataIndex = {};
        this.dataData = {};
        this.ztree = null;
        this.ztree_index = null;
        this.ztree_data = null;
        this.setting = {
            view: {showLine: false, showIcon: false, dblClickExpand: false},
            check: {enable: true, nocheck: false, chkboxType: {"Y": "ps", "N": "ps"}},
            callback: {
                beforeClick: function (id, node) {
                    node.children.length < 1 ? RoleAction.ztree.checkNode(node, !node.checked, null, true) : RoleAction.ztree.expandNode(node);
                    return false;
                }
            }
        };
        this.settingData = {
            view: {showLine: false, showIcon: false, dblClickExpand: false},
            check: {enable: true, chkStyle: "radio", radioType: "level"},
            callback: {
                beforeClick: function (id, node) {
                    node.children.length < 1 ? RoleAction.ztree.checkNode(node, !node.checked, null, true) : RoleAction.ztree.expandNode(node);
                    return false;
                }
            }
        };
        this.renderChildren = function (list, level) {
            var childrens = [];
            for (var i in list) childrens.push({
                open: true, node: list[i].node, name: list[i].title || list[i].node,
                checked: list[i].checked || false, children: this.renderChildren(list[i]._sub_, level + 1)
            });
            return childrens;
        };
        this.getData = function (that) {
            var index = $.msg.loading();
            $.form.load('{:url()}', {id: '{$vo.id}', action: 'get'}, 'post', function (ret) {
                that.data = that.renderChildren(ret.data.tree2, 1);
                that.dataIndex = that.renderChildren(ret.data.tree1, 1);
                that.dataData = that.renderChildren(ret.data.tree3, 1);
                console.log( that.data);
                return $.msg.close(index), that.showTree(), that.showIndex(),that.showData(), false;
            });
        };
        this.showTree = function () {
            this.ztree = $.fn.zTree.init($("#zTree"), this.setting, this.data);
            while (true) {
                var nodes = this.ztree.getNodesByFilter(function (node) {
                    return (!node.node && node.children.length < 1);
                });
                if (nodes.length < 1) break;
                for (var i in nodes) this.ztree.removeNode(nodes[i]);
            }
        };
        this.showIndex = function () {
            this.ztree_index = $.fn.zTree.init($("#showIndex"), this.setting, this.dataIndex);
            while (true) {
                var nodes = this.ztree_index.getNodesByFilter(function (node) {
                    return (!node.node && node.children.length < 1);
                });
                if (nodes.length < 1) break;
                for (var i in nodes) this.ztree_index.removeNode(nodes[i]);
            }
        };
        this.showData= function () {
            this.ztree_data = $.fn.zTree.init($("#showData"), this.settingData, this.dataData);
            while (true) {
                var nodes = this.ztree_data.getNodesByFilter(function (node) {
                    return (!node.node && node.children.length < 1);
                });
                if (nodes.length < 1) break;
                for (var i in nodes) this.ztree_data.removeNode(nodes[i]);
            }
        };
        this.submit = function () {
            var treename=$(".layui-tab-title li.layui-this").attr("data-ztree");
            var nodes = [], data = this[treename].getCheckedNodes(true),type=$(".layui-tab-title li.layui-this").attr("data-name");
            console.log(data)
            for (var i in data) if (data[i].node) nodes.push(data[i].node);
            $.form.load('{:url()}', {id: '{$vo.id}', action: 'save', nodes: nodes,type:type}, 'post');
        };
        // 刷新数据
        this.getData(this);
        // 提交表单
        $('[data-submit-role]').on('click', function () {
            RoleAction.submit();
        });
    };
    (function (storage) {
        (function (type, $default, $checked) {
            $default = $('.layui-tab ul.layui-tab-title li:first');
            $checked = $('.layui-tab ul.layui-tab-title li[data-type="' + type + '"]');
            ($checked.length > 0 ? $checked : $default).trigger('click');
        })(layui.data(storage)['type'] || '');
        $('.layui-tab ul.layui-tab-title li[data-type]').on('click', function () {
            layui.data(storage, {key: 'type', value: this.getAttribute('data-type')});
        });
    })('website-config-type');
</script>
{/block}

{block name="style"}
<link href="__ROOT__/static/plugs/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="__ROOT__/static/plugs/ztree/ztree.all.min.js"></script>
<style>
    ul.ztree li {
        white-space: normal !important;
    }

    ul.ztree li span.button.switch {
        margin-right: 5px;
    }

    ul.ztree ul ul li {
        display: inline-block;
        white-space: normal;
    }

    ul.ztree > li {
        padding: 15px 25px 15px 15px;
    }

    ul.ztree > li > ul {
        margin-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, .1);
    }

    ul.ztree > li > ul > li {
        padding: 5px;
    }

    ul.ztree > li > a > span {
        font-weight: 700;
        font-size: 15px;
    }

    ul.ztree .level2 .button.level2 {
        background: 0 0;
    }
</style>
{/block}